<template>
	<view class="pd16_15">
		<view class="welfare-header">
			
			<text class="welfare-subtitle">您的专属福利信息</text>
		</view>
		
		<view v-if="welfareInfo" class="welfare-content">
			<view class="welfare-card">
				<view class="welfare-text">{{welfareInfo}}</view>
			</view>
			<view class="copy-btn" @click="copyWelfare">
				
				<text class="copy-text">复制福利信息</text>
			</view>
		</view>
		
		<view v-else class="empty-state">
			<text class="empty-text">暂无福利信息</text>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				welfareInfo: '',
				site: {}
			}
		},
		onLoad(){
			this.loadWelfareData();
		},
		onShow(){
			this.loadWelfareData();
		},
		methods:{
			loadWelfareData(){
				try {
					// 从我的页面传递过来的福利数据
					const config = uni.getStorageSync("config");
					if (config && config.site && config.site.fuli) {
						this.site = config.site;
						this.welfareInfo = config.site.fuli;
					}
				} catch (error) {
					console.error('加载福利数据失败:', error);
				}
			},
			
			copyWelfare(){
				if (this.welfareInfo) {
					uni.setClipboardData({
						data: this.welfareInfo,
						success: () => {
							uni.showToast({
								title: '福利信息已复制',
								icon: 'success'
							});
						},
						fail: () => {
							uni.showToast({
								title: '复制失败',
								icon: 'none'
							});
						}
					});
				}
			}
		}
	}
</script>

<style>
.welfare-header {
	text-align: center;
	margin-bottom: 40rpx;
	padding: 20rpx 0;
}

.welfare-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #ffffff;
	display: block;
	margin-bottom: 10rpx;
}

.welfare-subtitle {
	font-size: 28rpx;
	color: #cccccc;
	display: block;
}

.welfare-content {
	margin-bottom: 40rpx;
}

.welfare-card {
	background: #1a1a1a;
	border-radius: 16rpx;
	padding: 40rpx;
	box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.5);
	border: 1rpx solid #333333;
	margin-bottom: 30rpx;
}

.welfare-text {
	font-size: 32rpx;
	color: #ffffff;
	line-height: 1.5;
}

.copy-btn {
	background: #34C759;
	color: #fff;
	padding: 25rpx 40rpx;
	border-radius: 16rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	transition: all 0.3s ease;
	box-shadow: 0 4rpx 20rpx rgba(52,199,89,0.3);
}

.copy-btn:active {
	background: #28A745;
	transform: scale(0.98);
}

.copy-icon {
	font-size: 28rpx;
	margin-right: 10rpx;
}

.copy-text {
	font-size: 28rpx;
	font-weight: bold;
}

.empty-state {
	text-align: center;
	padding: 100rpx 0;
}

.empty-text {
	font-size: 32rpx;
	color: #666666;
	display: block;
}

/* 添加页面背景色 */
page {
	background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
}
</style>